"use client";
import { ElementType } from "react";
import { Button, Col, Row } from "antd";
import React from "react";
import ReactDOM from "react-dom/client";
import "../style/UserModal.css";

export interface UserModalProps {
  conFirmText: string;
  cancelText: string;
  icon?: ElementType;
  title: string;
  content: string;
  width?: number;
  height?: number;
  timer?: number;
  onConfirm: () => void;
  onCancel: () => void;
}

export const UserModalOp = {
  open: (props: UserModalProps) => {
    const Node = document.createElement("div");
    Node.setAttribute("id", "client-usermodal");
    document.body.appendChild(Node);
    const root = ReactDOM.createRoot(
      document.getElementById("client-usermodal")!
    );
    root.render(
      <UserModal
        conFirmText={props.conFirmText}
        cancelText={props.cancelText}
        icon={props.icon ? props.icon : undefined}
        title={props.title}
        content={props.content}
        width={props.width ? props.width : 400}
        height={props.height ? props.height : 200}
        onConfirm={props.onConfirm}
        onCancel={props.onCancel}
      />
    );
  },
  close: () => {
    document.getElementById("client-usermodal")?.remove();
  },
};

/**
 * @description 自定义对话框，用来处理各种情况下需要出现确认取消等操作，才允许进行下一步操作
 * @param {conFirmText} props.conFirmText 确认按钮文字
 * @param {cancleText}  props.cancleText 取消按钮文字
 * @param {icon}        props.icon 图标
 * @param {title}       props.title 标头
 * @param {content}     props.content 内容提示
 * @param {width}       props.width 宽度，有宽度使用，无宽度默认
 * @param {height}      props.height 高度，有高度使用，无高度默认
 * @param {onConfirm}   props.onConfirm 点击确认
 * @param {onCancel}    props.onCancel 点击取消
 */
function UserModal(props: UserModalProps) {
  return (
    <div className="fullScreen">
      <div
        className="UserModal-Box"
        style={{ width: props.width + "px", height: props.height + "px" }}
      >
        <Row>
          <h3 className="UserModal-Title">{props.title}</h3>
        </Row>
        <Row style={{ marginTop: "20px" }}>
          {props.icon ? (
            <Col span={8} className="UserModal-Icon">
              <props.icon></props.icon>
            </Col>
          ) : null}
          <Col span={props.icon ? 16 : 24} className="UserModal-Content">
            <p>{props.content}</p>
          </Col>
        </Row>
        <Row style={{ marginTop: "20px", textAlign: "center" }}>
          <Col span={12}>
            <Button type="primary" onClick={props.onConfirm}>
              {props.conFirmText}
            </Button>
          </Col>
          <Col span={12}>
            <Button type="primary" danger onClick={props.onCancel}>
              {props.cancelText}
            </Button>
          </Col>
        </Row>
      </div>
    </div>
  );
}
